<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WebSocket客户端</title>
</head>
<body>
	<form onsubmit="return false">
		<textarea id="message" style="width: 800px; height: 30px">兄弟们，暂时用JSON跟你们通信，等研究明白了上MessagePack</textarea>
		<br/>
		<input type="button" value="Send" style="width: 790px; height: 30px; margin:5px" onclick="send(this.form.message.value);">
		<br/>
		<textarea id="responseText" style="width: 800px; height: 400px;"></textarea>
	</form>

	<script type="text/javascript">
		var socket;
		//如果浏览器支持WebSocket
		if (window.WebSocket) {
			//参数就是与服务器连接的地址
			socket = new WebSocket("ws://127.0.0.1:8888/ws");

			//客户端收到服务器消息的时候就会执行这个回调方法
			socket.onmessage = function(event) {
				console.log("onmessage:"+event.data);
				var ta = document.getElementById("responseText");
				//解析json
				var testEvent = JSON.parse(event.data);
				//将内容加入到文本框中
				ta.value = "【" +testEvent.time +","+testEvent.content +"】\n"+ta.value;
			}

			//连接建立的回调函数
			socket.onopen = function(event) {
				var ta = document.getElementById("responseText");
				ta.value = "建立连接";
			}

			//连接断掉的回调函数
			socket.onclose = function(event) {
				var ta = document.getElementById("responseText");
				ta.value =  "连接关闭\n" + ta.value;
			}
		} else {
			alert("浏览器不支持WebSocket！");
		}

		//发送数据
		function send(message) {
			if (!window.WebSocket) {
				return;
			}

			//当websocket状态打开
			if (socket.readyState == WebSocket.OPEN) {
				//测试事件
				var testEvent = {
					eventType : "TEST_EVENT",
					from : "WebSocket",
					time : new Date().format("yyyy-MM-dd HH:mm:ss"),
					content : message
				};

				socket.send(JSON.stringify(testEvent));
			} else {
				alert("连接没有开启");
			}
		}

		//时间格式化，Date的prototype 属性可以向对象添加属性和方法。   
		Date.prototype.format = function(fmt) {
			var o = {
				"M+" : this.getMonth() + 1,
				"d+" : this.getDate(),
				"H+" : this.getHours(),
				"m+" : this.getMinutes(),
				"s+" : this.getSeconds(),
				"S+" : this.getMilliseconds()
			};
			//因为date.getFullYear()出来的结果是number类型的,所以为了让结果变成字符串型，下面有两种方法：
			if (/(y+)/.test(fmt)) {
				//第一种：利用字符串连接符“+”给date.getFullYear()+""，加一个空字符串便可以将number类型转换成字符串。
				fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "")
						.substr(4 - RegExp.$1.length));
			}
			for ( var k in o) {
				if (new RegExp("(" + k + ")").test(fmt)) {
					//第二种：使用String()类型进行强制数据类型转换String(date.getFullYear())，这种更容易理解。
					fmt = fmt.replace(RegExp.$1,
							(RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k])
									.substr(String(o[k]).length)));
				}
			}
			return fmt;
		};
	</script>
</body>
</html>